<template>
  <div class="container">
    <headers />
    <top />
    <div class="cont">
      <div class="list">
        <div class="prise">商户简称</div>
        <input type="text" class="type name">
        <!-- <div class="type">海底捞火锅餐厅券</div> -->
      </div>
      <div class="list">
        <div class="prise" >所属类型</div>
        <div class="type">{{value}}<img src="@/assets/select.png" alt="" class="select" @click="showPicker = true"></div>
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>
     </div>
      <div class="list address">
        <div class="addressName">地址</div>
        <!-- <div class="type">海底捞火锅餐厅券</div> -->
        <input type="text" class="type">
      </div>
     <div class="list">
        <div class="prise" >营业时间</div>
        <div class="type">{{valueTime}}<img src="@/assets/select.png" alt="" class="select" @click="showTime = true"></div>
        <van-popup v-model="showTime" position="bottom">
          <van-picker
            show-toolbar
            :columns="time"
            @cancel="showTime = false"
            @confirm="onConfirm2"
          />
        </van-popup>
    </div>
    <div class="list">
        <div class="prise">联系电话</div>
       <input type="text" class="type name">
      </div>
    </div>
    <div class=" rule">
        <div class="prise"><van-checkbox v-model="checked" checked-color="#487cfb">请同意</van-checkbox></div>
        <div class="rule-wz">商户赞助规则</div>
    </div>
    <div class="next-btn" @click="routerLink(`home`)">下一步,奖项设置</div>
    <div class="aprt">有安米科技</div>
  </div>
</template>
<script>
import headers from "@/components/header";
import top from "@/components/top";
export default {
  components: {
    headers: headers,
    top: top
  },
  data() {
    return {
      value: '',
      showPicker: false,
      columns: ['餐饮', '快销', '娱乐', '院校', '政府'],
      valueTime: '',
      showTime: false,
      time: ['0点-1点', '0点-1点', '0点-1点', '0点-1点', '0点-1点'],
      checked: false,
    }
  },
  methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    onConfirm2(value) {
      this.valueTime = value;
      this.showTime = false;
    },
    routerLink(href){
         this.$router.push({
             name:href
         })
    } 
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 95%;
  margin: 0 auto;
  border: 1px solid;
  .cont {
    width: 100%;
    .list {
      border: 1px solid #487cfb;
      display: flex;
      justify-content: space-between;
      padding: 15px 10px;
      margin: 15px 10px;
      border-radius: 6px;
    }
     .name{
        text-align: right;
      }
    .prise {
      font-size: 14px;
      color: #b6b6b6;
    }
    .type {
      font-size: 16px;
      font-weight: bold;
      color: #487cfb;
      border: none;
      
    }
    .num {
      font-size: 14px;
      color: #487cfb;
      .show {
        color: #b6b6b6;
        padding-left: 5px;
      }
      
    }
    .select{
         width: 18px;
         padding-left: 10px;
         vertical-align: middle;
      }
    .address{
          display: block;
          .addressName{
              margin-bottom: 10px;
              color: #b6b6b6;
          }
      }
  }
  .rule{
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 14px;
        margin-bottom: 5%;
        .prise{
            text-align: center;
             color: #b6b6b6;
        }
        .rule-wz{
            color: #487cfb;
        }
    }
    .next-btn{
        width: 95%;
        margin: 0 auto;
        padding: 15px 0;
        background: #487cfb;
        color: #fff;
        text-align: center;
        margin-bottom: 10%;
        font-size: 14px;
        border-radius: 6px;
    }
    .aprt{
        width: 95%;
        margin: 0 auto;
        border-top: 1px solid #D9D9D9;
        padding-top: 15px;
        text-align: center;
        color: #999999;
        font-size: 14px;
    }
}
</style>